<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">
    <link href="../../plugins/bootstrap/css/style.css?v=4.1.0" rel="stylesheet" type="text/css">
    <!-- 引用自己写的css样式 -->
    <link href="../../css/index/index.css" rel="stylesheet" type="text/css">


    <link rel="stylesheet" type="text/css" href="../../css/daoyou/jquery.step.css">

    <title>下订单</title>

    <style>
        .text_1 {

            margin: 0 auto;
            width: 90%;
            text-indent: 30px;
            font-size: 20px;
        }

        .button_ss {
            text-align: right;
            margin-top: 10px;
            padding-right: 220px;

        }
    </style>
</head>

<body>

    <!--导航栏  -->
    <div class="container-fluid" id="head" style="margin-bottom: 0px;">
        <div class="row">

            <nav class="navbar" role="navigation"
                style="background-color: rgb(206, 228, 247);padding-left: 100px;margin-bottom: 0px">
                <div class="container-fluid">
                    <div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse" style="background-color: royalblue">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html"> <img src="../../imgs/index/logo.jpg" alt="失败" id="logo"
                                class="img-circle navbar-brand"></a>
                        <a class="navbar-brand" href="index.html" style="padding-left: 0px;font-family:楷体">
                            <span data-toggle="tooltip" title="悠 U 新方式">
                                悠&nbsp;U</span></a>
                    </div>

                    <div class="collapse navbar-collapse" id="example-navbar-collapse ">
                        <ul class="nav navbar-nav ">
                            <li><a href="index.html">
                                    <span style="padding:0px 20px" data-toggle="tooltip" title="首页"> 首页</span></a></li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    游记<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-user"
                                                style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
                                            &nbsp;达人
                                            <span class="badge pull-center" style="background-color: red">hot</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            写游记
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">赚钻石</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-flag"></span>
                                            游记主页</a></li><br>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    景点<b class="caret"></b>
                                    <!-- <span class="label label-danger" style="font-size: 1px;">NEW</span>-->
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#"><span class="glyphicon glyphicon-fire">&nbsp;主题景点</span>
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">NEW</span>
                                        </a></li><br>
                                    <li><a href="#"><span class="glyphicon glyphicon-plane">&nbsp;精品行程</span></a></li>
                                    <br>
                                    <li><a href="#"><span class="glyphicon glyphicon-bell">&nbsp;当地玩乐</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span data-toggle="tooltip" title="导&nbsp;游">导游</span>
                                    <!-- <span class="badge pull-center"
                                                style="color: red;font-size:1px">hot</span> -->
                                </a>
                            </li>

                        </ul>

                        <!-- <div style="padding-top:15px" class="">
                                        <input type="text" placeholder="用户/游戏/动态" style=" height:20px">
                                        
                                    </div> -->


                        <ul class="nav navbar-nav navbar-right" style="padding-right: 100px">

                            <li class="dropdown">
                            <li> <a></a></li>
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                    style="font-family: 楷体;padding-left: 0px">
                                    我的悠 U &nbsp;<img id="headerImg" src="../../imgs/index/head.jpg"
                                        class="img-circle"><b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">我的订单</a>
                                    </li>
                                    <li>
                                        <a href="#">我的导游</a>
                                    </li>
                                    <li>
                                        <a href="#">我的钱包</a>
                                    </li>

                                    <li>
                                        <a href="#">我的游记</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li> <a href="#">互动信息</a> </li>
                                    <li> <a href="#">我的账号</a> </li>
                                    <li> <a href="#">退出</a> </li>

                                </ul>
                            </li>
                            <li><a href="#weibo" style="padding-left:2px;padding-right: 2px"><i
                                        class="fa fa-weibo"></i></a></li>
                            <li><a href="#weixin" style="padding-left:2px;padding-right: 2px"><i
                                        class="fa fa-weixin"></i> </a></li>
                            <li><a href="#weixin" style="padding-left:2px;padding-right: 2px"> <i
                                        class="fa fa-qq"></i></a></li>
                            <li><a href="" style="padding-left:10px;padding-right: 10px">登录</li> </a>
                            <li><a href="" style="padding-left:10px;padding-right: 10px">注册</li> </a>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航栏end -->

    <!-- 进度条 -->
    <div class="step-body" id="myStep">
        <div class="step-header" style="width:80%">
            <ul>
                <li>
                    <p>用户须知</p>
                </li>
                <li>
                    <p>填写申请表</p>
                </li>
                <li>
                    <p>待确认</p>
                </li>
                <li>
                    <p>待核销</p>
                </li>
                <li>
                    <p>旅行结束</p>
                </li>
            </ul>
        </div>
        <div class="step-content">
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
            <div class="step-list"></div>
        </div>

    </div>

    <button id="goBtn" value="2" style="display:none">跳转的指定的步骤</button>
    <!-- 进度条end -->

    <!-- 用户须知 -->
    <div class="container-fluid" id="text_1" style="display: block">
        <div class="row">

            <div id="head_1"
                style="height: 500px;width:1000px;margin: 0 auto; background-color: antiquewhite;padding-top:20px">

                <div style="text-align:center;color:black">
                    <small style="margin-top:50px;font-size:30px;">用户须知</small>
                </div>

                <diV class="text_1">
                    为了提高员工外出旅游的安全意识，强化员工的纪律观念和法律意识，明确员工人身伤害事故发生时公司与员工双方的责任，保护员工和公司的合法权益，保证工作的顺利进行。员工和公司双方自愿签订如下协议：
                </diV>
                <div style=" overflow-y:auto; overflow-x:auto; width:1000px; height:300px; margin-top: 30px;">
                    <div class="text_1">
                        甲 方: ***男士
                    </div>
                    <div class="text_1">
                        乙 方：山西泰舆生物材料有限公司
                    </div>

                    <div class="text_1">
                        第一条：甲方自愿参加乙方平台旅游，并承诺遵守本协议之规定。
                    </div>
                    <div class="text_1">
                        第二条：甲方旅游可能出现的个人安全、经济、疾病等不可预测因素，乙方不承担任何责任，由甲方自己承担。
                    </div>
                    <div class="text_1">
                        第三条：甲方不得擅自离开团队，给集体或团队带来不必要的麻烦，否则后果自负。
                    </div>
                    <div class="text_1">
                        第四条：在旅游期间发生事故及责任，甲方使本人或他人人身、财产等造成的伤害，乙方不承担任何责任。
                    </div>
                    <div class="text_1">
                        第五条：甲方应切实注意个人财产安全，不得非法占有他人财物，因自身原因保管不善而造成财产损失的，由甲方自行负责，乙方不承担任何责任。
                    </div>
                    <div class="text_1">
                        第六条：如甲方给他人造成损害的，由甲方个人承担一切赔偿责任。
                    </div>
                    <div class="text_1">
                        第七条：甲方应切实严格遵守交通规则，出现交通事故的，由肇事方负责，乙方不承担任何责任。
                    </div>
                    <div class="text_1">
                        第八条：甲方具有完全民事行为能力并自愿参加。愿独立承担可能发生的一切损害。途中因本人游玩出现的任何事故及责任均自行负责。
                    </div>
                    <div class="text_1" style="text-align: right">
                        <input type="checkbox" onclick="use(this)"> 我已同意
                    </div>
                </div>

            </div>


        </div>

        <div class="button_ss">
            <button id="nextBtn" type="button" class="btn btn-default" onclick="nextBtn()"
                disabled="disabled ">下一步</button>
        </div>
    </div>


    <!-- 填写表单 -->
    <div class="container-fluid" id="text_2" style="display:none;">
        <div class="row" style="margin-left: 26%">
            <div class="col-md-8" style="background-image: url('../../imgs/travler/letter_bg.png') ; ">



                <!-- onsubmit="return check() -->
                <form class="form-horizontal" action="" name="loginForm">
                    <div class="form-group" style="margin-top:30px;">
                        <label class="col-sm-2 control-label">出行人姓名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="nums">
                        </div>

                        <label class="col-sm-2 control-label" id="c1"
                            style="color: red;font-size:10px;text-align: left;display: none">*名字不能为空</label>

                    </div>

                    <div class="form-group" style="margin-top:30px;">
                        <label class="col-sm-2 control-label">联系方式</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="phones">
                        </div>
                        <label class="col-sm-2 control-label" id="c2"
                            style="color: red;font-size:10px;text-align: left;display: none">*请正确填写手机号码</label>

                    </div>

                    <div class="form-group" style="margin-top:30px;">
                        <label class="col-sm-2 control-label">出发日期</label>
                        <div class="col-sm-4">
                            <input id="hello" class="laydate-icon form-control layer-date">
                        </div>
                        <label class="col-sm-2 control-label" id="c3"
                            style="color: red;font-size:10px;text-align: left;display: none">*请正确选择日期</label>

                    </div>

                    <div class="form-group" style="margin-top:30px;">
                        <label class="col-sm-2 control-label">游玩天数</label>
                        <div class="col-sm-4" id="dayss">
                            <select class="form-control" id="t">
                                <option value="1-2">1~2天</option>
                                <option value="3">3天</option>
                                <option value="4">4天</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-group" style="margin-top:30px; ">
                        <label class="col-sm-2 control-label">出行人数</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="peopless">
                                <option value="1">1人</option>
                                <option value="2">2人</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top:30px;text-align:right">
                        <div class="col-sm-4" style="margin:0 auto;margin-left: 30px;">
                            <button type="button" onclick="check()" style="font-size:15px;" class="btn btn-success"
                                value="3">提交</button>
                        </div>
                    </div>

                </form>
            </div>

        </div>

    </div>
    <!-- 填写表单end -->


    <!--待审核 -->
    <div id="text_3" class="container-fluid" style="display:none">

            <div class="row" style="margin-left: 35%;margin-top: 150px">

                <div style="float:left">

                      <img src="../../imgs/travler/icon-true.png" width="50" height="50">
                </div>
                <div  style="float:left;margin-top: 20px;margin-left: 10px">
                      正在飞快为您取得联系，我们第一时间会短信通知您~
                </div>
                <div style="clear: both;margin-top: 80px;margin-left: 60px">
                    <img src="../../imgs/travler/xg.png"  width="200" height="200">
                </div>

            </div>

    </div>


    <!-- 二维码-->
    <div id="text_4"  class="container-fluid" style="display:none; background-color: #F7F9F7;height: 500px; ">
            <div class="row" style="margin-left: 35%;margin-top: 150px">
                    <div  style="float:left;margin-left: 10px;">
                           此二维码用于导游核销，订单结束之后会自动失效
                      </div>
            <div style="clear: both;margin-top: 30px;margin-left: 60px">
                    <img src="../../imgs/travler/ewm.png"  width="200" height="200">
                </div>
               <p style="margin-left:20px;margin-top:50px;font-size:20px;font-family: Microsoft YaHei">
                    订单编号:15555272829903030
               </p>
                      
                 


</div>

    </div>







    <script>


        // 控制button
        function use(obj) {
            var bu = document.getElementById("nextBtn");
            if (obj.checked) {
                bu.disabled = !"disabled ";
                bu.className = "btn btn-primary";
            } else {
                bu.disabled = "disabled ";
            }

        }


        //  下一步
        function nextBtn() {
            document.getElementById("text_1").style = "display:none";
            document.getElementById("text_2").style = "display:block";
        }


        function isPoneAvailable(poneInput) {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(poneInput)) {
                return false;
            } else {
                return true;
            }
        }
        //日期比较
        function compareDate(date1, date2) {
            var date1 = new Date(date1);
            var date2 = new Date(date2);
            if (date1.getTime() > date2.getTime()) {
                return true;
            } else {
                return false;
            }
        }

        //获取当前时间

        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        }

        // 表单提交
        function check() {
            var name = document.getElementById("nums").value.trim(); //名字
            console.log(name.length);
            if (name.length == 0) {
                document.getElementById("c1").style = "color: red;font-size:10px;text-align: left;display:block";

            }

            var today = getNowFormatDate();


            var phone = document.getElementById("phones").value.trim(); //手机号

            var phons = false;
            if (phone.length != 0) {
                if (isPoneAvailable(phone)) {

                    phons = true;
                } else {
                    document.getElementById("c2").style = "color: red;font-size:10px;text-align: left;display:block";
                }

            } else {
                phons = false;
                document.getElementById("c2").style = "color: red;font-size:10px;text-align: left;display:block";
            }
            var date = document.getElementById("hello").value.trim();
            var daaa = false;
            if (date.length == 0) {

                document.getElementById("c3").style = "color: red;font-size:10px;text-align: left;display:block";
            } else {
                daaa = compareDate(date, today);
                if(daaa==false){
                    document.getElementById("c3").style = "color: red;font-size:10px;text-align: left;display:block";
                }
            }


            var t = document.getElementById("t").value;
            var peoples = document.getElementById("peopless").value;

            if (nums.length != 0 && phons && daaa) {
                console.log("res");
                console.log(name + " " + phone + " " + peoples + " " + t + " " + date);

                document.getElementById("text_2").style = "display:none";
                document.getElementById("goBtn").value = "3";
                document.getElementById("goBtn").click(); //自动促发一个点击时间
                document.getElementById("text_3").style = "display:block";
                return true;
            } else {
                console.log("no");
                console.log(name + " " + phone + " " + peoples + " " + t + " " + date);
                return false;
            }

        }


    </script>


    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>

    <script src="../../js/daoyou/jquery.min.js"></script>
    <script src="../../js/daoyou/jquery.step.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>




    <!-- 日期 -->
    <script src="../../H+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../H+/js/plugins/layer/laydate/laydate.js"></script>
    <script>
        //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>
    <!-- 日期end -->
</body>

</html>